import 'package:flutter/material.dart';
import 'package:roundcheckbox/roundcheckbox.dart';

class Cart extends StatefulWidget {
  @override
  State<Cart> createState() => _CartState();
}

class _CartState extends State<Cart> {
  @override
  bool checked = false;
  bool goodsItemChecked = false;
  getCheckBoxBorderColor() {
    if (this.checked) {
      return Colors.black;
    } else {
      return const Color(0xFFD1D1D1);
    }
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('购物车'),
      ),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.all(10),
                child: Column(
                  children: [goodsItem(goodsItemChecked), goodsInfo()],
                ),
              ),
            ),
          ),
          Container(
            child: Row(
              children: [
                Container(
                  width: MediaQuery.of(context).size.width * 0.2,
                  child: Column(
                    children: [
                      RoundCheckBox(
                        onTap: (bool value) {
                          this.checked = value;
                        },
                        uncheckedColor: Color(0x003C78FF),
                        checkedColor: Colors.black,
                        size: 20,
                        checkedWidget: const Icon(
                          Icons.check,
                          color: Colors.white,
                          size: 15,
                        ),
                        border: Border.all(
                            color: getCheckBoxBorderColor(), width: 1),
                        isChecked: this.checked,
                      ),
                      Container(
                        child: Text(
                          '全选',
                          style: TextStyle(fontSize: 12),
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  height: 48,
                  alignment: Alignment.center,
                  padding: EdgeInsets.only(right: 15),
                  decoration: BoxDecoration(
                      border: Border(
                    top: BorderSide(color: Colors.grey, width: 0.3),
                  )),
                  width: MediaQuery.of(context).size.width * 0.3,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        child: Text(
                          '共2件',
                          style: TextStyle(
                              color: Color.fromRGBO(153, 153, 153, 1),
                              fontSize: 13),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Container(
                            child: Text(
                              '合计：',
                              style: TextStyle(
                                  color: Color.fromRGBO(153, 153, 153, 1),
                                  fontSize: 13),
                            ),
                          ),
                          Container(
                            child: Text(
                              '￥555',
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(context, 'pay');
                  },
                  child: Container(
                    width: MediaQuery.of(context).size.width * 0.50,
                    child: Container(
                      height: 48,
                      alignment: Alignment.center,
                      color: Colors.black,
                      child: Text(
                        '确认结算',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

//商品
Widget goodsItem(bool goodsItemChecked) {
  bool _footDataFlag = true;
  return StatefulBuilder(
    builder: (BuildContext context, setState) {
      return Container(
        padding: EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.grey, width: 0.3))),
        child: Column(
          children: [
            Row(
              children: [
                Container(
                  margin: EdgeInsets.only(right: 15),
                  child: RoundCheckBox(
                    onTap: (bool value) {
                      goodsItemChecked = value;
                    },
                    uncheckedColor: Color(0x003C78FF),
                    checkedColor: Colors.black,
                    size: 20,
                    checkedWidget: const Icon(
                      Icons.check,
                      color: Colors.white,
                      size: 15,
                    ),
                    border: Border.all(width: 1, color: Color(0xFFD1D1D1)),
                    isChecked: goodsItemChecked,
                  ),
                ),
                Expanded(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 76,
                        height: 76,
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            '左脚',
                            style: TextStyle(color: Colors.white, fontSize: 8),
                          ),
                          width: 45,
                          height: 15,
                          color: Colors.black,
                        ),
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage('images/home/good.png'))),
                      ),
                      Expanded(
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              height: 76,
                              margin: EdgeInsets.only(left: 15),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Container(
                                        child: Text('标题'),
                                      ),
                                      Row(
                                        children: [
                                          Container(
                                            child: Text(
                                              '款号：M421',
                                              style: TextStyle(
                                                  color: Color.fromRGBO(
                                                      153, 153, 153, 1),
                                                  fontSize: 10),
                                            ),
                                          ),
                                          Container(
                                            child: Text(
                                              '尺码：55',
                                              style: TextStyle(
                                                  color: Color.fromRGBO(
                                                      153, 153, 153, 1),
                                                  fontSize: 10),
                                            ),
                                          )
                                        ],
                                      ),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Container(
                                        margin: EdgeInsets.only(right: 15),
                                        child: Text(
                                          '￥457',
                                          style: TextStyle(
                                              fontSize: 17,
                                              fontWeight: FontWeight.bold),
                                        ),
                                      ),
                                      GestureDetector(
                                        onTap: () {
                                          setState(() =>
                                              {_footDataFlag = !_footDataFlag});
                                        },
                                        child: Row(
                                          children: [
                                            Container(
                                              child: Text(
                                                '更多',
                                                style: TextStyle(
                                                    color: Colors.red),
                                              ),
                                            ),
                                            Icon(
                                              Icons
                                                  .keyboard_arrow_down_outlined,
                                              color: Colors.red,
                                            )
                                          ],
                                        ),
                                      )
                                    ],
                                  )
                                ],
                              ),
                            ),
                            Container(
                              child: Text('x1'),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            if (_footDataFlag) goodsExtend()
          ],
        ),
      );
      ;
    },
  );
}

//商品扩展
Widget goodsExtend() {
  return Container(
    child: Column(
      children: [
        Container(
          margin: EdgeInsets.only(top: 10),
          decoration: BoxDecoration(
              border:
                  Border(bottom: BorderSide(color: Colors.grey, width: 0.3))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Container(
                    color: Colors.black,
                    width: 3,
                    height: 20,
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 10),
                    child: Text(
                      '定制信息',
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
              SizedBox(
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.red),
                  onPressed: () {},
                  child: Row(
                    children: [
                      Container(
                        child: Icon(
                          Icons.refresh_outlined,
                          color: Colors.white,
                        ),
                      ),
                      Container(
                        child: Text(
                          '更新设计',
                          style: TextStyle(color: Colors.white),
                        ),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
        Container(
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.only(top: 10, bottom: 10),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(color: Colors.grey, width: 0.3))),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Container(
                          child: Image.asset(
                            'images/detail/foot.png',
                            width: 10,
                            height: 15,
                            fit: BoxFit.cover,
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 3),
                          child: Text('左脚'),
                        )
                      ],
                    ),
                    SizedBox(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            child: Text('部件：鞋面'),
                          ),
                          Container(child: Text('材质：网布')),
                          Container(child: Text('颜色：红色')),
                        ],
                      ),
                      width: 300,
                      height: 30,
                    )
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.only(top: 10, bottom: 10),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(color: Colors.grey, width: 0.3))),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Container(
                          child: Image.asset(
                            'images/detail/foot.png',
                            width: 10,
                            height: 15,
                            fit: BoxFit.cover,
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 3),
                          child: Text('右脚'),
                        )
                      ],
                    ),
                    SizedBox(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            child: Text('部件：鞋面'),
                          ),
                          Container(child: Text('材质：网布')),
                          Container(child: Text('颜色：红色')),
                        ],
                      ),
                      width: 300,
                      height: 30,
                    )
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.only(top: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Container(
                          child: Text('刺绣信息'),
                        )
                      ],
                    ),
                    SizedBox(
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(
                                child: Text('区域：左脚'),
                              ),
                              Container(child: Text('字体：黑体')),
                              Container(child: Text('文字：红色')),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(
                                child: Text('区域：右脚'),
                              ),
                              Container(child: Text('字体：黑体')),
                              Container(child: Text('颜色：黑色')),
                            ],
                          ),
                        ],
                      ),
                      width: 300,
                      height: 50,
                    )
                  ],
                ),
              ),
            ],
          ),
        )
      ],
    ),
  );
}

//商品价格等信息

Widget goodsInfo() {
  TextStyle _textstyle =
      TextStyle(color: Color.fromRGBO(153, 153, 153, 1), fontSize: 13);
  MainAxisAlignment _spaceBetween = MainAxisAlignment.spaceBetween;
  bool codeFalg = true;
  return StatefulBuilder(
    builder: (BuildContext context, setState) {
      return Container(
        height: 194,
        margin: EdgeInsets.only(top: 20),
        child: Column(
          mainAxisAlignment: _spaceBetween,
          children: [
            Row(
              mainAxisAlignment: _spaceBetween,
              children: [
                Container(
                  child: Text(
                    '商品总额',
                    style: _textstyle,
                  ),
                ),
                Container(
                  child: Text(
                    '￥99999',
                    style: _textstyle,
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: _spaceBetween,
              children: [
                Container(
                  child: Text(
                    '商品数量',
                    style: _textstyle,
                  ),
                ),
                Container(
                  child: Text(
                    '2',
                    style: _textstyle,
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: _spaceBetween,
              children: [
                Container(
                  child: Text(
                    '运费',
                    style: _textstyle,
                  ),
                ),
                Container(
                  child: Text(
                    '免费',
                    style: _textstyle,
                  ),
                )
              ],
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  codeFalg = !codeFalg;
                  print(codeFalg);
                });
              },
              child: Row(
                mainAxisAlignment: _spaceBetween,
                children: [
                  Row(
                    children: [
                      Container(
                        child: Text(
                          '优惠码',
                          style: _textstyle,
                        ),
                      ),
                      Container(
                        child: Icon(
                          codeFalg
                              ? Icons.keyboard_arrow_up_outlined
                              : Icons.keyboard_arrow_down_rounded,
                          color: Color.fromRGBO(153, 153, 153, 1),
                        ),
                      ),
                    ],
                  ),
                  Container(
                    child: Text(
                      '￥10.00',
                      style: TextStyle(color: Colors.red),
                    ),
                  )
                ],
              ),
            ),
            if (codeFalg)
              Row(
                children: [
                  SizedBox(
                    width: 272,
                    height: 48,
                    child: Container(
                      margin: EdgeInsets.only(right: 10),
                      padding: EdgeInsets.only(left: 10),
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: Color.fromRGBO(153, 153, 153, 1),
                              width: 0.5)),
                      child: TextField(
                        decoration: InputDecoration(
                            hintText: '请输入优惠码',
                            border: InputBorder.none,
                            hintStyle: TextStyle(
                                color: Color.fromRGBO(153, 153, 153, 1))),
                      ),
                    ),
                  ),
                  Expanded(
                      child: SizedBox(
                    height: 48,
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                          primary: Color.fromRGBO(242, 242, 242, 1)),
                      onPressed: () {},
                      child: Text(
                        '应用',
                        style:
                            TextStyle(color: Color.fromRGBO(153, 153, 153, 1)),
                      ),
                    ),
                  ))
                ],
              ),
            Row(
              children: [
                Container(
                  child: Text(
                    '买家留言',
                    style: _textstyle,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 15, top: 3),
                  child: Text(
                    '6666',
                    style: TextStyle(),
                  ),
                )
              ],
            )
          ],
        ),
      );
      ;
    },
  );
}
